<template>
  <!-- 自动监测 -->
  <div class="board_page" style="">
    <el-row>
      <el-col :span="5">
        <div style="background-color: #1b1b1b;">
          <dv-border-box-8
            style="height: 49vh;"
            class="fade_animition_left"
            :class="isControl?'left_project':''"
            :color="['#1990fe', '#3BD5FD']">
            <dv-loading style="position: absolute;z-index: 9999;color:white;" v-show="showLoading">Loading...
            </dv-loading>
            <dv-decoration-1 style="width:8rem;height:2rem;float: right;top: 20px;"/>
            <h6 class="l_title-s">监测设备统计</h6>
            <dv-decoration-10 style="width:100%;height:5px;"/>

            <div style="margin: 0.2rem 0;text-align: center">

              <div class="online_button">
                <div class="l_title-s-2">{{onlineCount}}</div>
                <div style="text-align: center;margin-top: -1rem"><img src='../imgs/online_button.png'
                                                                       style="width: 5rem;height: 4rem"></div>
                在线设备
              </div>

              <div class="online_button">
                <div class="l_title-s-2">{{offlineCount}}</div>
                <div style="text-align: center;margin-top: -1rem"><img src='../imgs/offline_button.png'
                                                                       style="width: 5rem;height: 4rem"></div>
                离线设备
              </div>
            </div>
            <dv-capsule-chart :key="equipStaticKey" :config="equipStatic"
                              style="width:80%;height:25vh;margin-left: 20px"/>
          </dv-border-box-8>
          <dv-border-box-8
            style="height: 40vh"
            :class="isControl?'left_project':''"
            :color="['#1990fe', '#3BD5FD']"
            backgroundColor="rgba(27, 27, 27, 1)">
            <dv-decoration-1 style="width:8rem;height:2rem;float: right;top: 20px;"/>
            <h6 class="l_title-s">监测对象统计</h6>
            <dv-decoration-10 style="width:100%;height:5px;"/>
            <div ref="chart_3" class="chart_2"></div>
          </dv-border-box-8>

        </div>
      </el-col>
      <el-col :span="14">
        <div style="height: 50px;">
          <el-row>
            <el-col :span="8">
              <dv-border-box-9
                style="height: 50px"
                :color="['#1990fe', '#3BD5FD']"
                backgroundColor="rgba(27, 27, 27, 1)">
                <div class="top_title_static">数据总量：<span>{{dataCount.count}}</span></div>
              </dv-border-box-9>
            </el-col>
            <el-col :span="8">
              <dv-border-box-9
                style="height: 50px"
                :color="['#1990fe', '#3BD5FD']"
                backgroundColor="rgba(27, 27, 27, 1)">
                <div class="top_title_static">设备数量：<span>{{onlineCount+offlineCount}}</span></div>
              </dv-border-box-9>
            </el-col>
            <el-col :span="8">
              <dv-border-box-9
                style="height: 50px"
                :color="['#1990fe', '#3BD5FD']"
                backgroundColor="rgba(27, 27, 27, 1)">
                <div class="top_title_static">预警数据：<span>{{warnAllCount}}</span></div>
              </dv-border-box-9>
            </el-col>
          </el-row>
        </div>


        <div style="height: calc(100vh - 152px);">
          <module-map ref="map"></module-map>
        </div>
      </el-col>

      <el-col :span="5">
        <div style="background-color: #1b1b1b;">
          <dv-border-box-8
            style="height: 20vh"
            class="fade_animition_left"
            :class="isControl?'left_project':''"
            :color="['#1990fe', '#3BD5FD']"
            backgroundColor="rgba(27, 27, 27, 1)">
            <dv-decoration-3 style="width:8rem;height:1rem;float: right;top: 1rem;"/>
            <h6 class="l_title-s">预警等级</h6>
            <dv-decoration-10 style="width:100%;height:5px;"/>
            <div style="text-align: center;color: #FFFFFF">
              <dv-border-box-10 :span="12" v-for="item in countWarn"
                                :key="item.warningLevel" :title="item.warningLevelName" :color="[ item.color,'#ffffff']"
                                :class="item.num > 0?'warring_div':''"
                                :style="`height:3rem;width:10rem;margin: 0.5rem;border-radius: 0.2rem;padding: 0.5rem;width: 45%;display: inline-block;box-shadow: ${item.color} 0px 0px 60px 3px inset;`">
                <p style="font-size: 1rem;font-family: YouSheBiaoTiHei;">
                  {{item.warningLevelName}}</p>
                <div style="margin-top: 0.2rem">
                  <span>数量：</span><span>{{ item.num }}</span>
                  <span>；占比：</span><span>{{ item.percent }}%</span>
                </div>
              </dv-border-box-10>
            </div>

          </dv-border-box-8>
          <dv-border-box-8
            style="height: 29vh"
            :class="isControl?'left_project':''"
            :color="['#1990fe', '#3BD5FD']"
            backgroundColor="rgba(27, 27, 27, 1)">
            <dv-decoration-1 style="width:8rem;height:2rem;float: right;top: 20px;"/>
            <h6 class="l_title-s">监测预警统计</h6>
            <dv-decoration-10 style="width:100%;height:5px;"/>
            <div style="padding-left: 2rem">
              <div ref="chart_4" class="chart_3"></div>
            </div>
          </dv-border-box-8>

          <dv-border-box-8
            style="height: 40vh"
            :class="isControl?'left_project':''"
            :color="['#1990fe', '#3BD5FD']"
            backgroundColor="rgba(27, 27, 27, 1)">
            <dv-decoration-3 style="width:8rem;height:1rem;float: right;top: 1rem;"/>
            <h6 class="l_title-s">最新消息</h6>
            <dv-decoration-10 style="width:100%;height:5px;"/>
            <dv-scroll-board :config="rightTableConfig" @click="click" style="width:94%;margin-left:3%;height:32vh"/>
          </dv-border-box-8>

        </div>
      </el-col>
    </el-row>

    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
  import ModuleMap from '../modules/map.vue'
  import {
    countWarnList,
  } from '@/services/model/project-info.js'
  import {monitorTypeCount, queryRecentList, queryWeekWarningCount} from '@/services/model/monitor-board'
  import {recordWarningList} from '@/services/model/warning'
  import Format from '@/utils/format'
  import {actions, store} from "../../../monitor/work-point.store";
  import PictureViewer from '@/components/picture-viewer'
  import constUrl from '@/services/env'

  const Echarts = require('echarts')

  export default {
    components: {PictureViewer, ModuleMap},
    data() {
      return {
        showLoading: false,
        equipStaticKey: 1,
        equipStatic: {
          data: [],
          showValue: true
        },
        constUrl,
        countWarn: [],
        charts: null,
        // 右边列表
        rightTableList: [],
        equipStatus: [],
        monitorType: [],
        dataCount: {},
        monitor: {},
        onlineCount: 0,
        offlineCount: 0,
        warnAllCount: 0
      }
    }, filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer));
      },
    },

    computed: {
      isControl() {
        if (this.$route.params.projectId) {
          return true
        }
        return false
      },
      projectDetail() {
        return store.projectInfo
      },
      rightTableConfig() {
        return {
          header: ['', '监测类型', '预警内容', '预警等级'],
          data: this.rightTableList.map(x => [
            x,
            x.monitorTypeName,
            x.recordValueName,
            `<p style=\"text-align:center;width:80%;margin:0.1rem;background-color:${x.color}\" title="${x.warningLevelName}">${x.warningLevelName}</p>`,
          ]),
          headerBGC: '#22314B',
          oddRowBGC: '#1990FE',
          evenRowBGC: '#1b1b1b',
          rowNum: 10,
          headerHeight: 40,
          //第一个值用作跳转使用，把padding样式去掉，就不展示；最后一个作为查看按钮
          columnWidth: ['0px;padding:0', 140, 180, '140px;cursor: pointer;'],
        }
      }
    },
    methods: {
      getChar(index) {
        switch (index) {
          case 0:
            return '一'
          case 1:
            return '二'
          case 2:
            return '三'
          case 3:
            return '四'

        }
      },
      async queryWeekWarningCount() {
        let {data} = await queryWeekWarningCount({projectId: this.$route.params.projectId})
        let seriesList = []
        data.data.map((x, index) => {
          seriesList.push({
            name: this.getChar(index) + '级预警',
            type: 'line',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: x
          })
        })
        this.updateLineChart(data.time, seriesList)
      },
      async getRecordWarningList() {
        let form = {
          page: 1,
          pageSize: 20,
          cleanFlag: 0,
          projectId: this.$route.params.projectId
        }
        let {data} = await recordWarningList(form)
        let list = data?.records || []
        list.map(x => {
          x.color = this.gradeColor(x.warningLevel)
        })
        this.rightTableList = list
      },
      // 预警等级颜色
      gradeColor(val) {
        switch (val) {
          case 2:
            return "#00A6FF";
          case 3:
            return "#FF9C00";
          case 4:
            return "#FF7700";
          case 5:
            return "#FF1800";
        }
      },
      // 查看大图
      previewImg(index, urls) {
        this.$refs.imageViewer.showViewer(urls.map(x => this.constUrl + x), index)
      },
      // 预警等级修改地图
      seeMap(index) {
        this.$emit('getShopCode', index)
      },
      // 预警等级占比
      async warnCountList(projectId) {
        let res = await countWarnList({projectId});
        let countWarn = res.data ? res.data : [];
        countWarn = countWarn.filter(x => x.warningLevel !== 1)
        let warnAllCount = countWarn.reduce(
          (acc, current) => acc + parseInt(current.num),
          0
        );
        if (warnAllCount === 0) {
          this.countWarn = countWarn.map((item) => {
            return {
              ...item,
              percent: 0,
              color: this.gradeColor(item.warningLevel)
            }; // 占比
          });
        } else {
          this.countWarn = countWarn.map((item) => {
            return {
              ...item,
              percent: parseInt((item.num / warnAllCount) * 100),
              color: this.gradeColor(item.warningLevel)
            }; // 占比
          });
        }
        this.warnAllCount = warnAllCount
      },
      async click(data) {
        let row = data.row[0]
        await actions.queryProjectInfo(row.projectId)
        await actions.queryWorkPointList(row.projectId)
        this.$router.push({
          path: `/project/${row.projectId}/data-share?activeId=${row.monitorPointId}&monitorType=${row.monitorType}&workPointId=${row.workPointId}`
        })
      },
      // 隐患排查-最近数据轮播(TOP20)
      async queryRightList(projectId) {
        const {data} = await queryRecentList({projectId})
        this.rightTableList = data || []
      },
      // 左边的echarts
      async queryLeftChart(projectId) {
        this.showLoading = true
        const {data} = await monitorTypeCount({projectId})
        let list = data?.typeCount.map(x => ({name: x.name, value: x.value})) || []
        list.sort((a, b) => b.value - a.value);//降序排序
        this.dataCount = {
          img: require('../imgs/list_icon_0.png'),
          name: '监测数据总量',
          count: data.mainCount.find(x => x.name === '监测数据总量').value || 0,
          color: 'color3'
        }
        data.mainCount.map(x => {
            if (x.name === '在线') {
              this.onlineCount = x.value
            } else if (x.name === '离线') {
              this.offlineCount = x.value
            }
          }
        )
        this.monitor = data.mainCount.filter(x =>
          x.name === "工点" || x.name === '监测点'
        )
        this.monitorType = data.mainCount.filter(x =>
          x.name === "自动监测点" || x.name === '人工监测点'
        )
        this.dispatchAction1 = ''
        this.dispatchAction2 = ''
        this.equipStatic.data = list
        this.equipStaticKey += 1
        let workPointTypeList = data.typeCount
        this.showLoading = false
        this.updateChart(workPointTypeList)
      },
      // 初始化echarts
      initChart() {
        this.charts = Echarts.init(this.$refs.chart_3, null, {
          locale: 'ZH'
        })
        this.lineCharts = Echarts.init(this.$refs.chart_4, null, {
          locale: 'ZH'
        })

      },
      // 渲染数据
      updateChart(data) {
        this.charts.clear()
        const option = {
          tooltip: {
            trigger: 'item'
          },
          color: [
            '#80FABA',
            '#2BF8E3',
            '#3BD5FD',
            '#266BFF',
            '#5E52F9',
            '#80FABA',
            '#2BF8E3',
            '#2BF8E3'
          ],
          legend: {
            top: '3%',
            left: 'left',
            textStyle: {
              color: '#ffffff'
            },
            formatter: (name) => {
              let item = data.find(x => x.name === name)
              return name + ' ' + item.value
            },
          },
          series: [
            {
              name: '监测类型',
              type: 'pie',
              radius: ['40%', '65%'],
              avoidLabelOverlap: false,
              top: 60,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data
            }
          ]
        }
        this.dispatchAction1 = 'highlight'
        this.dispatchAction2 = 'showTip'
        this.charts.setOption(option)
        let currentIndex = 0
        // setInterval(() => {
        //   var dataLen = option.series[0].data.length;
        //   // 取消之前高亮的图形
        //   this.charts.dispatchAction({
        //     type: 'downplay',
        //     seriesIndex: 0,
        //     dataIndex: currentIndex
        //   });
        //   currentIndex = (currentIndex + 1) % dataLen;
        //   // 高亮当前图形
        //   this.charts.dispatchAction({
        //     type: this.dispatchAction1,
        //     seriesIndex: 0,
        //     dataIndex: currentIndex
        //   });
        //   // 显示 tooltip
        //   this.charts.dispatchAction({
        //     type: this.dispatchAction2,
        //     seriesIndex: 0,
        //     dataIndex: currentIndex
        //   });
        // }, 2000);
      },
      // 渲染数据
      updateLineChart(timeData, seriesList) {
        this.lineCharts.clear()
        const option = {
          tooltip: {
            trigger: 'item'
          },
          color: [
            '#FF1800',
            '#FF7700',
            '#FF9C00',
            '#00A6FF',
          ],
          legend: {
            top: '3%',
            left: 'left',
            icon: 'circle',
            itemWidth: 5,
            itemHeight: 5,
            textStyle: {
              color: '#ffffff'
            },
            data: ['一级预警', '二级预警', '三级预警', '四级预警']
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: timeData
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
            },
          },
          series: seriesList
        }
        this.lineCharts.setOption(option)
      },
      // 路线改变
      refresh(projectId) {
        this.queryLeftChart(projectId)
        this.warnCountList(projectId)
        this.$refs.map.refresh(projectId)
        this.getRecordWarningList()
      },
    },
    mounted() {
      let projectId = this.$route.params.projectId
      this.initChart(projectId)
      this.queryWeekWarningCount()
      window.onresize = () => {
        this.charts.resize()
      }
    },
    activated() {
      let projectId = this.$route.params.projectId
      this.refresh(projectId)
    }
  }
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .left_project {
    .equip_status {
      margin: 0 0.5rem;
      width: 9rem;
      height: 3rem;
    }
  }

  .online_button {
    display: inline-block;
    width: 50%;
    text-align: center;
    height: 3rem;
    padding-top: 1rem;
    font-family: YouSheBiaoTiHei;
    font-size: 1.2rem /* 24/16 */;
    line-height: 1.3375rem /* 31/16 */;
    color: #FFFFFF;
  }

  .equip_status {
    margin: 0 1rem;
    width: 10rem;
    height: 3rem;
    display: inline-block;
    line-height: 3rem;
    color: #ffffff;
    font-size: 1.2rem
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 30vh;
    overflow: hidden;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .chart_3 {
    width: 90%;
    height: 28rem;
    margin-left: 20px;
  }

  .chart_2 {
    width: 92%;
    height: 38vh;
    margin-left: 20px;
  }

  .chart_3 {
    width: 100%;
    height: 28vh;
    margin-left: -1rem;
  }

  .left-li {
    position: relative;
    margin: 0.5rem;
    width: 50%;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 0.8rem;
  }

  .left .left-li .left-li-title-right {
    float: right;
    font-size: 0.8rem;
    color: #939EA3;
  }

  .left-li-bottom {
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-around;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;
  }

  .left-li-bottom::before, .left-li-bottom::after {
    content: " ";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3A506A;
    position: absolute;
    top: -0.15rem;
    z-index: 2;
  }

  .left-li-bottom::before {
    left: 0;
  }

  .left-li-bottom::after {
    right: 0;
  }

  .left .left-li .left-li-top-title img {
    width: 2.0rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;

    /deep/ .el-card__body {
      padding: 0px;
      display: flex;
      align-items: center;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      display: inline-block;
      padding: 10px 0;
      width: 75%;

      p {
        margin-bottom: 1vh;
      }
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      .el-progress-bar__outer {
        background-color: #9a9a9a;
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      line-height: 20px;
      font-size: 26px !important;
    }
  }


  .equipmentBox {
    width: 50%;
    /*display: inline-block;*/
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    font-size: 10px;
    color: #82a8f2;
  }

  .s-detail ul li span {
    font-weight: normal;
    color: #ffffff;
  }

  .project_survey {
    overflow: auto;
    word-wrap: break-word;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    text-indent: 20px;
    height: 10vh;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #8c939d;
    border-radius: 10px;
  }

  .top_title_static {
    text-align: center;
    color: #ffffff;
    font-family: YouSheBiaoTiHei;
    font-size: 1.2rem /* 24/16 */;
    line-height: 2.9375rem /* 31/16 */;

    span {
      font-size: 25px;
    }
  }

  .card-concent {
    height: 30px;
    line-height: 30px;
  }

  .l_title-s-2 {
    margin-bottom: -1.5rem;
    position: relative;
    font-family: YouSheBiaoTiHei;
    font-size: 1.5rem /* 24/16 */;
    line-height: 1.9375rem /* 31/16 */;
    color: #FFFFFF;

    &.margin_top {
      margin-top: 1.875rem /* 30/16 */;
    }
  }

  .warring_div {
    animation: fade 1000ms infinite;
    -webkit-animation: fade 1000ms infinite;
  }

  @keyframes fade {
    from {
      opacity: 1.0;
    }
    50% {
      opacity: 0.5;
    }
    to {
      opacity: 1.0;
    }
  }
</style>

